<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <style>
    .content {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 6px;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <input class="song-id" type="text" value="28012031" placeholder="请输入歌曲id"><br>
  <label for="song">歌曲<input id="song" name="detail" type="radio" value="song"></label><br>
  <label for="lyric">歌词<input id="lyric" name="detail" type="radio" value="lyric"></label><br>
  <label for="comments">评论<input id="comments" name="detail" type="radio" value="comments"></label><br>
  <label for="detail">详情<input id="detail" name="detail" type="radio" value="detail"></label><br>
  <br>
  <button class="btn">查看</button>
  <p class="content"></p>
  <script>
    $(function() {

      $('.btn').click(function() {
        var url = 'https://api.imjad.cn/cloudmusic/?type=lyric&id=28012022&br=128000';
        var id = $('.song-id').val()
        var type = $('input[type=radio]:checked').val()
        $.ajax({
          url: `https://api.imjad.cn/cloudmusic/`,
          method: 'GET',
          data: {
            type: type,
            id,
            br: '128000'
          },
          success: function(data) {
            var text = ''
            if(type == 'lyric') {
              text = data.tlyric.lyric
            }else if(type == 'song'){
              text = `下载地址：<a href=${data.data[0].url} taeget=_blank>点击下载</a>`
            }else if(type == 'detail'){
              text = `专辑名称：${data.songs[0].alia}<br>歌手：${data.songs[0].ar[0].name}
              <br><img src=${data.songs[0].al.picUrl}>`
            }
            $('.content').html(text)
          }
        })
      })

    })
  </script>
</body>
</html>